<template>
  <div id="storelist" style="height:100%;">
    <div class="sltap">
      <tab custom-bar-width="70px" :line-width="0" active-color="#666666">
        <tab-item class="tabicon" @on-item-click="tabclick">{{adrshownamelist[0]}}</tab-item>
        <tab-item class="tabicon" @on-item-click="tabclick">{{adrshownamelist[1]}}</tab-item>
        <tab-item class="tabicon" @on-item-click="tabclick">{{adrshownamelist[2]}}</tab-item>
        <!-- <tab-item class="tabicon" @on-item-click="typeshowlist">{{selecttyps[0]}}</tab-item> -->
      </tab>
    </div>
    <div class="sltaptag">
      <scroller class="sltagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
        <div class="plsliderlist" name="slist1">
          <div class="plitem" v-for="(iitem, index) in lists1" :key="index">
            <div class="plitemleft">
              <div class="title">{{iitem.sname}}<span>{{iitem.longkm}}km</span></div>
              <div class="plitemblock">
                <div class="blockleft">地址：</div>
                <div class="blockright">{{iitem.saddress}}</div>
              </div>
              <!-- <div class="plitemblock">
                <div class="blockleft">电话：</div>
                <div class="blockright plitemtell">{{iitem.stell}}</div>
              </div> -->
            </div>
            <div class="plitemright" @click="showWxMap(index)"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
    </div>
    <x-address @on-hide="logHide" title="选择地区" v-model="addresslist" :list="addressData" @on-shadow-change="onShadowChange" placeholder="请选择地址" :show.sync="showAddress"></x-address>
    <popup-picker title="选择类型" :show="showtypes" :data="typeoption" v-model="selecttyps" @on-hide="onTypeHide" @on-change="onTypeChange" placeholder="请选择类型"></popup-picker>
    <loading :show="loadtoast" :text="'加载中'"></loading>
  </div>
</template>

<script>
  import { PopupPicker, Tab, TabItem, Loading, Scroller, XAddress, LoadMore, ChinaAddressV3Data } from 'vux'

  export default {
    name: 'storelist',
    components: {
      PopupPicker,
      Tab,
      TabItem,
      Loading,
      Scroller,
      LoadMore,
      XAddress
    },
    data () {
      return {
        isshowload: false,
        loadtip: '',
        isupload: false,
        loadtoast: false,
        lng: 0,
        lat: 0,
        addresslist: [],
        adrnumslist: [],
        adrnamelist: [],
        adrshownamelist: ['省', '市', '区'],
        addressData: ChinaAddressV3Data,
        showAddress: false,
        isHostback: false,
        isHostadd: false,
        bottomCount1: 0,
        lists1: [],
        showtypes: false,
        typeoption: [['VIP门店', '所有']],
        selecttyps: ['VIP门店'],
        readytypes: [],
        typekey: ''
      }
    },
    created () {
      this.loadtoast = true
      // wechat
      this.$wechat.ready(() => {
        this.$wechat.getLocation({
          type: 'wgs84',
          success: (res) => {
            this.lat = res.latitude // 纬度，浮点数，范围为90 ~ -90
            this.lng = res.longitude // 经度，浮点数，范围为180 ~ -180。
            // show all list
            this.getList(this.bottomCount1)
            .then((data) => {
              this.lists1.push.apply(this.lists1, data)
              this.$nextTick(() => {
                if (data.length > 0) {
                  this.bottomCount1 = this.lists1.length
                }
                this.$refs.scrollerBottom1.reset()
                this.loadtoast = false
              })
            }, () => {})
          }
        })
      })
    },
    methods: {
      tabclick: function () {
        this.showAddress = true
      },
      typeshowlist: function () {
        this.showtypes = true
      },
      getList: function (lastnumber) {
        return this.$axios.post(this.apidomain + '/api/store/getStoreList/' + this.getCookie('appid'), {
          pageIndex: lastnumber,
          longitude: this.lng,
          latitude: this.lat,
          province: this.addresslist[0] || '',
          city: this.addresslist[1] || '',
          district: this.addresslist[2] || '',
          isVip: this.typekey
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, 'usable')
              .then((data) => {
                this.lists1.push.apply(this.lists1, data)
                if (data.length > 0) {
                  this.bottomCount1 = this.lists1.length
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onShadowChange (ids, names) {
        this.adrnumslist = ids
        this.adrnamelist = names
      },
      logHide (issure) {
        this.showAddress = false
        if (issure) { // 确定按钮
          this.addresslist = this.adrnumslist
          this.adrshownamelist = this.adrnamelist
          this.bottomCount1 = 0
          this.lists1 = []
          this.getList(this.bottomCount1)
          .then((data) => {
            this.lists1.push.apply(this.lists1, data)
            if (data.length > 0) {
              this.bottomCount1 = this.lists1.length
            }
            this.$nextTick(() => {
              this.$refs.scrollerBottom1.reset({top: 0})
            })
          }, () => {})
        }
      },
      showWxMap (index) {
        window.zhuge.track('Click', {
          '事件名称': '会员中心-店铺查询-门店地址-点击',
          '店铺名称': this.lists1[index].sname,
          'OpenID': this.getCookie('openid'),
          '点击时间': (new Date().toLocaleString())
        })
        this.$wechat.ready(() => {
          this.$wechat.openLocation({
            latitude: this.lists1[index].slat,
            longitude: this.lists1[index].slng,
            name: this.lists1[index].sname, // 位置名
            address: this.lists1[index].saddress, // 地址详情说明
            scale: 25 // 地图缩放级别,整形值,范围从1~28。默认为最大
          })
        })
      },
      onTypeHide: function (issure) {
        if (issure) {
          this.selecttyps = this.readytypes
          switch (this.selecttyps[0]) {
            case '所有':
              this.typekey = ''
              break
            case '非VIP门店':
              this.typekey = '0'
              break
            case 'VIP门店':
              this.typekey = '1'
              break
            default:
              this.typekey = ''
              break
          }
          this.bottomCount1 = 0
          this.lists1 = []
          this.getList(this.bottomCount1)
          .then((data) => {
            this.lists1.push.apply(this.lists1, data)
            if (data.length > 0) {
              this.bottomCount1 = this.lists1.length
            }
            this.$nextTick(() => {
              this.$refs.scrollerBottom1.reset({top: 0})
            })
          }, () => {})
        }
        this.showtypes = false
      },
      onTypeChange: function (ids) {
        this.readytypes = ids
      },
      // 监听物理返回
      forbidBack () {
        this.showAddress = false
        this.showtypes = false
        window.removeEventListener('popstate', this.forbidBack)
        if (!this.isHostback) {
          window.history.back()
        }
      }
    },
    watch: {
      // 监听返回路径
      showAddress (n, o) {
        if (n) {
          if (!this.isHostadd) {
            window.history.pushState({title: this.$route.meta.title, url: '#' + this.$route.fullPath}, null, document.URL)
            this.isHostadd = true
          }
          this.isHostback = true
          // 监听返回
          window.addEventListener('popstate', this.forbidBack)
        } else {
          this.isHostback = false
        }
      },
      showtypes (n, o) {
        if (n) {
          if (!this.isHostadd) {
            window.history.pushState({title: this.$route.meta.title, url: '#' + this.$route.fullPath}, null, document.URL)
            this.isHostadd = true
          }
          this.isHostback = true
          // 监听返回
          window.addEventListener('popstate', this.forbidBack)
        } else {
          this.isHostback = false
        }
      }
    }
  }
</script>

<style lang="less">
// @import '../assets/less/product/list.less';
#storelist{
  position: fixed;
  height: 100%;
  width: 100%;
  .sltap {
    overflow: hidden;
  }
  .tabicon {
    position: relative;
  }
  .tabicon:after {
    content: '';
    border-color: #666666 transparent transparent;
    border-width: 5px 5px 0;
    top: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    position: relative;
    left: 3px;
  }
  .tabicon:before {
    display: inline-block;
    content: '';
    width: 1px;
    background-color: #e6e6e6;
    height: 60%;
    position: absolute;
    left: 0;
    top: 20%;
  }
  .tabicon:first-child:before {
    width: 0;
  }
  .plitem {
    width: calc(~'100% - 20px');
    padding: 0 10px;
    display: inline-block;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
  }
  .plitemleft {
    float: left;
    width: calc(~'100% - 60px');
    padding-right: 10px;
    margin: 12px 0;
    border-right: 1px solid #e6e6e6;
    .title {
      position: relative;
      padding-right: 4rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      span {
        position: absolute;
        right: 0;
        top: 0;
        font-size: .8rem;
        color: #999999;
        line-height: 1.6rem;
      }
    }
    .plitemblock {
      width: 100%;
      padding: .2rem;
      font-size: .8rem;
      color: #999999;
      .blockleft {
        float: left;
        width: 3rem;
      }
      .blockright {
        float: left;
        width: calc(~'100% - 3rem');
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .plitemtell {
        color: #ef8d95;
      }
    }
  }
  .plitemright {
    float: right;
    width: 49px;
    height: 49px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    right: 10px;
    text-align: center;
    color: @theme-color;
    i {
      line-height: 50px;
      font-size: 2rem;
    }
  }
}
</style>
